<template>
  <view class="c-tabs-continar" :style="{ background, fontSize: fontSize + 'rpx' }">
    <view @tap="changeTab(i)" class="tab-i" :style="{ color: activeIndex == i ? activeColor : color }" v-for="(t, i) in tabs_text" :key="i">{{ t }}</view>
    <view :animation="animationData" :class="[`underline${tabs_text.length}`]" />
  </view>
</template>

<script setup>
import { defineProps, defineEmits, ref } from 'vue'
import { createAnimation, useDidShow } from '@tarojs/taro'
import { getSysInfo } from '@/common/system'

const props = defineProps({
  tabs_text: {
    type: Array,
    default() {
      return ['热映中', '影院', '待上映']
    }
  },
  fontSize: {
    type: Number,
    default: 28
  },
  color: {
    type: String,
    default: '#1a1a1a'
  },
  activeColor: {
    type: String,
    default: '#ff2755'
  },
  background: {
    type: String,
    default: '#fff'
  }
})

const activeIndex = ref(0)
const translateX = ref(0)
const contentHeight = ref(200)
const animationData = ref()
const animation = ref()

const emit = defineEmits(['changeTab'])
const changeTab = e => {
  activeIndex.value = e
  emit('changeTab', e)
  translate(e)
}

const translate = e => {
  animation.value?.translateX(e * translateX.value).step()
  animationData.value = animation.value?.export()
}
useDidShow(() => {
  animation.value = createAnimation({
    duration: 300,
    timingFunction: 'ease'
  })
  setTimeout(() => {
    const sysInfo = getSysInfo()
    translateX.value = sysInfo.windowWidth / props.tabs_text.length
    contentHeight.value = sysInfo.safeArea.height / 1.5
    translate(activeIndex.value)
  }, 0)
})
</script>

<style lang="scss">
@import '@/assets/styles/custom_theme.scss';
.c-tabs-continar {
  height: 36px;
  width: 100%;
  display: flex;
  z-index: 11;
  position: relative;
  .tab-i {
    width: 50%;
    text-align: center;
    line-height: 36px;
    transition: all 0.25s;
    color: $title-color;
  }
  .underline2,
  .underline3 {
    content: ' ';
    position: absolute;
    bottom: 3px;
    left: 0;
    height: 3px;
    border-radius: 3px;
    background: $primary-btn-bg-color;
  }
  .underline2 {
    margin: 0 20%;
    width: 10%;
  }
  .underline3 {
    margin: 0 11.5%;
    width: 10.33%;
  }
}
</style>
